<template>
  <div class="progress">
    <div v-if="type === 'line'" class="progress-line">
      <div class="progress-line__outer" ref="outer" @click.stop="clickOuter">
        <div class="progress-line__inner" :style="innerStyle">
          <span class="progress-line__dot"
                ref="dot"
                @touchstart.prevent='touchstart'
                @touchmove.prevent='touchmove'
                @touchend.prevent='touchend'
          ></span>
        </div>
      </div>
    </div>
    <div v-if="type === 'circle'" class="progress-circle">
      <svg class="progress-circle-svg" :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <circle class="progress-circle__background" r="50" cx="50" cy="50" fill="transparent"/>
        <circle class="progress-circle__bar" r="50" cx="50" cy="50" fill="transparent"
                :stroke-dasharray="dashArray"
                :stroke-dashoffset="dashOffset"/>
      </svg>
      <div class="slot">
        <slot></slot>
      </div>
    </div>
  </div>
</template>
<script>
import { rangs } from '@/utils'

export default {
  props: {
    percentage: {
      type: Number,
      required: true,
      validator(value) {
        return value >= 0 && value <= 100
      }
    },
    type: {
      type: String,
      default: 'line' // circle  line
    },
    radius: {
      type: Number,
      default: 32
    },
    immediate: Boolean
  },
  computed: {
    innerStyle() {
      return {
        width: `${this.width}px`
      }
    },
    dashOffset() {
      return (1 - this.percentage) * this.dashArray
    }
  },
  data() {
    return {
      width: 0,
      dashArray: Math.PI * 100,
      lock: false
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      this.$nextTick(() => {
        if (this.type === 'line') {
          this.width = this.percentage / 100 * this.$refs.outer.clientWidth
        }
      })
    },
    touchstart(e) {
      this.startX = e.touches[0].clientX
      this.$refs.dot.classList.add('progress-line__dot--active')
    },
    touchmove(e) {
      this.lock = true
      let moveX = e.touches[0].clientX
      let diff = this.startX - moveX
      this.startX = moveX
      this.width = rangs(this.startX - diff - this.$refs.outer.offsetLeft, this.$refs.outer.clientWidth, 0)
      if (this.immediate) {
        this.emitChange()
      }
    },
    touchend(e) {
      this.lock = false
      this.$refs.dot.classList.remove('progress-line__dot--active')
      this.emitChange()
    },
    clickOuter(e) {
      this.width = e.offsetX
      this.emitChange()
    },
    emitChange() {
      this.$emit('change', this.width / this.$refs.outer.clientWidth)
    }
  },
  watch: {
    percentage(newPercentage) {
      if (newPercentage >= 0 && !this.lock) {
        if (this.type === 'line') {
          this.width = newPercentage * this.$refs.outer.clientWidth
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
@import '~@/style/variable.less';

.progress{
  .progress-line{
    width: 100%;
    .progress-line__outer{
      height: 1px;
      background-color: #797979;
      .progress-line__inner{
        position: relative;
        height: 100%;
        background-color: white;
        .progress-line__dot{
          width: 6px;
          height: 6px;
          background-color: white;
          position: absolute;
          right: 0;
          top: 50%;
          border-radius: 50%;
          transform: translateY(-50%) translateX(50%);
        }
        .progress-line__dot--active{
          transform: translateY(-50%) translateX(50%) scale(1.3);
        }
      }
    }
  }
  width: 100%;
  .progress-circle{
    position: relative;
    width: 100%;
    height: 100%;
    .progress-circle-svg, .slot{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateY(-50%) translateX(-50%);
    }
    circle{
      stroke-width: 6px;
      transform-origin: center;
    }
    .progress-circle__background{
      transform: scale(0.9);
      stroke: #9e9e9e;
    }
    .progress-circle__bar{
      transform: scale(0.9) rotate(-90deg);
      stroke: red;
      stroke-linecap: round;
    }
  }
}
</style>